import {useEffect, useState} from 'react';
import {Radio, RadioChangeEvent, Select} from 'antd';
import {userChatStore} from "@/app/store/chat-store";
import {GLMVersion, GptVersion} from "@/app/constants";
import {SessionConfig} from "@/types/chat";

const { Option } = Select;

export function SelectComponent(props : {
    config:SessionConfig,

}){
    const [value, setValue] = useState(1); // 初始化 Radio 的值，默认为 1
    const chatStore = userChatStore();
    const {config} = props;
    const onChange = (e: RadioChangeEvent) => {
        setValue(e.target.value);
        if(e.target.value==1){
            chatStore.updateCurrentSession((session) => {
                session.config = {
                   ...session.config,
                    glmConfig: GLMVersion.CHATGLM_TURBO,
                    huiHuaFlag: 1
                }
            })
        }
        if(e.target.value==2){
            chatStore.updateCurrentSession((session) => {
                session.config = {
                    ...session.config,
                    gptVersion: GptVersion.GPT_3_5_TURBO,
                    huiHuaFlag: 2
                }
            })
        }

    };

    // 根据 Radio 的值决定要显示的 Select
    let selectComponent;
    switch (value) {
        case 1:
            selectComponent = (
                <Select
                    value={config?.glmConfig??GLMVersion.CHATGLM_TURBO}
                    style={{ width: 160 }}
                    onChange={(value, option) =>{
                        chatStore.updateCurrentSession((session) => {
                            session.config = {
                                // session.config 的一个新副本，并更新了其中的 gptVersion 属性，将其设置为新的值 value。
                                ...session.config,
                                glmConfig: value,
                                huiHuaFlag: 1
                            }
                        })
                    }}
                    options={[
                        { value: GLMVersion.CHATGLM_TURBO, label: 'chatglm_turbo(新)' },
                        { value: GLMVersion.CHATGLM_6B_SSE, label: 'chatGLM_6b_SSE' },
                        { value: GLMVersion.CHATGLM_LITE_32K, label: 'chatglm_lite_32k' },

                    ]}
                />
            );
            break;
        case 2:
            selectComponent = (
                <Select
                    value={config?.gptVersion??GptVersion.GPT_3_5_TURBO}
                    style={{ width: 160 }}
                    options={[
                        { value: GptVersion.GPT_3_5_TURBO, label: 'gpt-3.5-turbo' },
                        { value: GptVersion.GPT_3_5_TURBO_16K, label: 'gpt-3.5-turbo-16k' },
                        { value: GptVersion.DALL_E_2, label: 'dall-e-2(文字生成图片)' },
                        { value: GptVersion.TEXT_DAVINCI_002, label: 'text-davinci-002【停止维护】' },
                        { value: GptVersion.TEXT_DAVINCI_003, label: 'text-davinci-003【停止维护】' },
                        { value: GptVersion.DALL_E_3, label: 'dall-e-3【敬请期待】' },
                        { value: GptVersion.GPT_4, label: 'gpt-4【敬请期待】' },
                        { value: GptVersion.GPT_4_32K, label: 'gpt-4-32k【敬请期待】' },
                    ]}
                    onChange={(value) => {
                        chatStore.updateCurrentSession((session) => {
                            session.config = {
                                ...session.config,
                                gptVersion: value,
                                huiHuaFlag: 2

                            }
                        });
                    }}
                />
            );
            break;
        case 3:
            selectComponent = null;
            break
        case 4:
            selectComponent = null;
            break
        default:
            selectComponent = null;
            break;
    }

    return (
        <div>
            <Radio.Group onChange={onChange} value={value}>
                <Radio value={1}>GLM</Radio>
                <Radio value={2}>GPT</Radio>

            </Radio.Group>

            {selectComponent}
        </div>
    );
};
